<!-- 订单列表 -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="card">
      <el-row :gutter="20">
          <el-col :span="8" class="search">
            <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear='getOrderList'>
              <el-button slot="append" icon="el-icon-search" @click="getQueryAboutList"></el-button>
            </el-input>
          </el-col>
          </el-row>
        <el-table
            :data="ordersList.goods"
            style="width: 100%"
            border
            stripe
            >
            <el-table-column
            label="#"
            type="index"> </el-table-column>
            <el-table-column
            label="订单编号"
            prop="order_number"
            width="220px"> </el-table-column>
            <el-table-column
            label="商品价格"
            prop="order_price">
              <template v-slot="scoped">
                {{scoped.row.order_price.toFixed(2)}}
              </template>
            </el-table-column>
            <el-table-column
            label="支付方式"
            prop="order_pay">
              <template v-slot="scoped">
                 <!-- 0未支付 1支付宝  2微信  3银行卡 -->
                <el-tag v-if="scoped.row.order_pay === '0'" size="small" type="danger">未支付</el-tag>
                <el-tag v-if="scoped.row.order_pay === '1'" size="small">支付宝</el-tag>
                <el-tag v-if="scoped.row.order_pay === '2'" size="small">微信</el-tag>
                <el-tag v-if="scoped.row.order_pay === '3'" size="small">银行卡</el-tag>
              </template>
            </el-table-column>
             <el-table-column
            label="是否发货"
            prop="is_send">
              <template v-slot="scoped">
                <el-tag v-if="scoped.row.is_send === '否'" size="small" type="danger">未发货</el-tag>
                <el-tag v-else size="small" type="success">已发货</el-tag>
              </template>
            </el-table-column>
            <el-table-column
            label="发票抬头"
            >
              <template v-slot="scoped">
                <span v-if="scoped.row.order_fapiao_title !==''">{{scoped.row.order_fapiao_title}}</span>
                <span v-if="scoped.row.order_fapiao_company !==''">{{scoped.row.order_fapiao_company}}</span>
                <span v-if="scoped.row.order_fapiao_content !==''">{{scoped.row.order_fapiao_content}}</span>
              </template>
            </el-table-column>
            <el-table-column
            label="收获地址"
            prop="consignee_addr"></el-table-column>
             <el-table-column
            prop="create_time"
            label="创建时间"
            >
              <template v-slot="scoped">
                <span>{{formatDate(scoped.row.create_time)}}</span>
              </template>
             </el-table-column>
        </el-table>
            <div class="div-el-pagination">
              <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              @prev-click="handlePrevChange"
              @next-click="handleNextChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10,12,16,20]"
              :page-size="queryInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="ordersList.total">
              </el-pagination>
            </div>
    </el-card>
  </div>
</template>

<script>
export default {
  created () {
    this.getOrderList()
  },
  data () {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      dialogAddVisible: false,
      ordersList: {}
    }
  },
  methods: {
    async getOrderList () {
      const gParams = {
        url: '/orders',
        params: this.queryInfo
      }
      const res = await this.$send(gParams)
      if (res.meta.status === 200) {
        this.ordersList = res.data
        this.total = res.total
      }
    },
    getQueryAboutList() {
      this.getOrderList()
    },
    handleCurrentChange(curPage) {
      this.queryInfo.pagenum = curPage
      this.getOrderList()
    },
    handleSizeChange(pagesize) {
      this.queryInfo.pagesize = pagesize
      this.getOrderList()
    },
    handlePrevChange(curPage) {
      this.queryInfo.pagenum = curPage
      this.getOrderList()
    },
    handleNextChange(curPage) {
      this.queryInfo.pagenum = curPage
      this.getOrderList()
    },
    formatDate(nowL) {
      const now = new Date((nowL * 1000))
      var year = now.getFullYear()
      var month = now.getMonth() + 1
      var date = now.getDate()
      var hour = now.getHours()
      var minute = now.getMinutes()
      var second = now.getSeconds()
      return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
    }
  }
}
</script>
<style lang='less' scoped>
.div-el-pagination{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}
.el-bread-group{
  height: 40px;
  line-height: 40px;
  background-color: #E9EEF3;
  padding-left: 10px;
}
.el-row{
  height: 40px;
  margin-bottom: 10px;
}
</style>
